﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Custom Floating Objects</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Custom Floating Objects"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n523","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="You can create custom floating objects." /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="b8d0c866-7cde-4675-883d-315c99aa5c34"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="d1ac0a25-b8bb-4ee0-a5b9-e99bf89cfd51"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="8"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / Custom Floating Objects</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Custom Floating Objects<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>You can create custom floating objects.</p>

<p>You can put an HTML element in a floating object. The following image displays a button element in a floating object.</p>

<p><img border="0" alt="" src="images/customfloating.png" /></p>

<p>You can specify whether the floating object is visible or locked (<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~isVisible.html">isVisible</a> or&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~isLocked.html">isLocked</a> methods). The <strong>isLocked</strong> method only has an effect if the sheet is protected. You can use the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~dynamicMove.html">dynamicMove</a> method to specify whether the floating object moves when hiding or showing, resizing, or moving rows or columns. You can specify whether the size of the floating object changes when hiding or showing, resizing, or moving rows or columns with the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~dynamicSize.html">dynamicSize</a> method.</p>

<p>When the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~fixedPosition.html">fixedPosition</a> method of a floating object&nbsp;is true, the floating object's position is not changed after scrolling, hiding, showing, resizing, or moving rows or columns. The&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~dynamicMove.html">dynamicMove</a> and&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~dynamicSize.html">dynamicSize</a> methods are disabled if the <strong>fixedPosition</strong> method is true. If the <strong>fixedPosition</strong> method is true, the floating object can be moved or resized.</p>

<p>The following&nbsp;methods work as before if the <strong>fixedPosition</strong> method is true:</p>

<ul>
    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endColumn.html">endColumn</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endColumnOffset.html">endColumnOffset</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endRow.html">endRow</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endRowOffset.html">endRowOffset</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~height.html">height</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startColumn.html">startColumn</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startColumnOffset.html">startColumnOffset</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startRow.html">startRow</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startRowOffset.html">startRowOffset</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~width.html">width</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~x.html">x</a></li>

    <li><a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~y.html">y</a></li>
</ul>

<p>You can resize or move floating objects with the mouse. You can also set the width, height, or position of the floating object with the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~width.html">width</a>,&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~height.html">height</a>,&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~x.html">x</a>, or&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~y.html">y</a> method. You can use row and column indexes to specify the position by setting the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startColumn.html">startColumn</a>&nbsp;and&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startRow.html">startRow</a>&nbsp;methods. You can specify an offset with the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startColumnOffset.html">startColumnOffset</a> and&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startRowOffset.html">startRowOffset</a>&nbsp;methods. You can also set&nbsp;the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endColumn.html">endColumn</a>,&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endRow.html">endRow</a>,&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endColumnOffset.html">endColumnOffset</a>, and&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~endRowOffset.html">endRowOffset</a>&nbsp;methods.</p>

<p>The following image displays a custom floating object that uses&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startColumn.html">startColumn</a>,&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startRow.html">startRow</a>,&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startColumnOffset.html">startColumnOffset</a>, and&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~startRowOffset.html">startRowOffset</a>&nbsp;methods.</p>

<p><img border="0" alt="" src="images/offset.png" /></p>

<p>You can select floating objects by using the left or right mouse button or you can use the&nbsp;<a href="SpreadJS~GC.Spread.Sheets.FloatingObjects.FloatingObject~isSelected.html">isSelected</a> method. You can use the Tab key or Shift+Tab to navigate between multiple floating objects. You can select multiple floating objects by holding down Ctrl or Shift while clicking the right mouse button.</p>

<p>You can cut, copy, or paste the floating object with standard shortcut keys. You can also use undo and redo actions with floating objects.</p>

<h4>Using Code</h4>

<p>This example adds a custom floating object to the sheet.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">var customFloatingObject = new GC.Spread.Sheets.FloatingObjects.FloatingObject("f1", 10, 10, 60, 64);<br />
                var btn = document.createElement('button');<br />
                btn.style.width = "60px";<br />
                btn.style.height = "30px";<br />
                btn.innerText = "button";<br />
                customFloatingObject.content(btn);<br />
                activeSheet.floatingObjects.add(customFloatingObject);</td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><div class="i-section-heading" id="i-seealso-section-heading"><span class="i-section-heading-icon"><!-- --></span><span class="i-section-heading-text">See Also</span></div><div id="i-seealso-section-content" class="i-section-content"><div class="i-see-also-link">
<a href="floatpic.html">Floating Pictures</a></div>

</div><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
